<template>
  <div class="p_wrap">
      <a-form :model="formState"
         autocomplete="off"
         :rules="rules">
        <a-form-item label="姓名" name="username"
          >
          <a-input v-model:value="formState.username"></a-input>
        </a-form-item>
         <a-form-item label="工号">
          <a-input disabled v-model:value="formState.workNumber">  </a-input>
        </a-form-item>
         <a-form-item label="手机号"
          name="mobile">
          <a-input v-model:value="formState.mobile"></a-input>
        </a-form-item>
         <a-form-item label="部门">
              <a-cascader v-model:value="formState.departmentId" :options="Casoptions" placeholder="Please select"
              :fieldNames="{label:'name',value:'id'}"
              />

        </a-form-item>
         <a-form-item label="聘用形式">
          <a-select  v-model:value="formState.formOfEmployment">
            <a-select-option value="1">正式</a-select-option>
            <a-select-option value="2">非正式</a-select-option>
          </a-select>
        </a-form-item>
         <a-form-item label="入职时间" >
            <a-date-picker format="YYYY-MM-DD" v-model:value="formState.timeOfEntry" />
        </a-form-item>
         <a-form-item label="转正时间" >
             <a-date-picker format="YYYY-MM-DD" v-model:value="formState.correctionTime"  />
        </a-form-item>
         <a-form-item label="头像">
              <a-upload
                  name="avatar"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
               
             
                >
                  <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                  <div v-else>
                    <loading-outlined v-if="loading"></loading-outlined>
                    <plus-outlined v-else></plus-outlined>
                    <div class="ant-upload-text">Upload</div>
                  </div>
                </a-upload>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="toSave">保存更新</a-button>
        </a-form-item>
      </a-form>

  </div>
</template>

<script setup lang="ts">
    import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
    import {getDepartment,addEmployee,getEmployeeDetail,updateEmployee} from '../../../api/person'
    import {toTree} from '../../../utils/tool'
    import {message} from 'ant-design-vue'
    import {useRouter,useRoute} from 'vue-router'
      import {ref,reactive} from 'vue'
      import dayjs from 'dayjs';
      //  import mitt from '../../../utils/mitt'
      let router=useRouter()
      let route=useRoute()
        let imageUrl=ref('')
       
        let loading=ref(false)
        let Casoptions=ref([]);
        
      let formState:any=reactive({
        correctionTime:"",
        departmentId:[],
        formOfEmployment:"",
        mobile:"",
        staffPhoto:"",
        timeOfEntry:"",
        username:"",
        workNumber:""
      })
      let depart:any=ref([])//部门的原始数据 没处理成tree数据
        let getPert=async ()=>{
          let res=await getDepartment();
            depart.value=res;
           Casoptions.value=toTree(res);
      
           console.log( Casoptions.value,"级联数据-----")

      }
      getPert();
            
        // 如果有页面传来的id就回显
        if(route.query.id){
          setTimeout(() => {
                  getEmployeeDetail(route.query.id).then((res:any)=>{
                      console.log(res,"3333333333")
                      formState.username=res.username;
                      formState.mobile=res.mobile;
                      formState.staffPhoto=res.staffPhoto
                        formState.workNumber=res.workNumber
                        formState.id=res.id; //编辑需要的id
                      // 时间选择器的回显  npm i dayjs
                      formState.timeOfEntry=dayjs(res.timeOfEntry,'YYYY-MM-DD')
                      formState.correctionTime=dayjs(res.correctionTime,'YYYY-MM-DD')

                      formState.formOfEmployment=res.formOfEmployment==1?'正式':'非正式'
                      // 根据后台返回id找到父级id
                      console.log(res.departmentId,"后台返回id")
                      let parentId=depart.value.find((item:any)=>{
                        console.log(item,"每一项",res.departmentId) 
                            return   item.id==res.departmentId
                      })
                
                      console.log(parentId,"find找到的内容")
                      if(parentId.pid==1){
                        formState.departmentId=[1,res.departmentId]
                      }else{
                          formState.departmentId=[1,parentId.pid,res.departmentId]
                      }
                    
                      console.log(formState,"9999999990000000000")
                  })
          }, 100);
        
        }
    
      const rules: any = {
            username: [
              { required: true, message: 'Please input Activity name', trigger: 'change' },
              { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
            ],
            mobile: [{ required: true, message: 'Please select Activity zone', trigger: 'blur' }]
          };
          // 获取添加的部门级联选择器数据
  
    

      // 保存接口
      let toSave=async ()=>{
       
          formState.departmentId=formState.departmentId.pop()
          let s=new Date(formState.correctionTime)
          let e=new Date(formState.timeOfEntry)
          formState.correctionTime=s.getFullYear()+"-"+(s.getMonth()+1)+"-"+s.getDate()
           formState.timeOfEntry=e.getFullYear()+"-"+(e.getMonth()+1)+"-"+e.getDate()
           if(formState.formOfEmployment=="正式"){
            formState.formOfEmployment=1;
           }
          if(formState.formOfEmployment=="非正式"){
            formState.formOfEmployment=2;
           }
       
          console.log(formState)
          if(formState.id){ //编辑接口
           let editRes=await updateEmployee(formState)
           console.log(editRes)
             message.success("编辑成功")
          }else{ //添加接口
                let res=await addEmployee(formState)
                console.log(res)
                message.success("添加成功")
          }
      
          router.push({name:"person"})
          
      }
</script>
<style lang="less" scoped>
    .p_wrap{
      width:800px;
      height: 700px;
      padding: 80px;
      box-sizing: border-box;
    }
</style>